<template>
	<div>
		<div class="header">
			<div class="header-user" @click="userSetting">
				<div class="header-user-photo">
					<img :src="userInfo.avatar" alt="" />
				</div>
				<span>{{ userInfo.nickname }}</span>
			</div>
			<div class="header-search" @click="search">
				<i class="icon iconfont">&#xe72c;</i>
			</div>
		</div>
		<popup v-model:show="visible"> hhhhhh </popup>
		<!-- <action-sheet
			v-model:show="visible"
			:options="[
				{ label: 'h', value: 1 },
				{ label: 'g', value: 2, disabeld: true }
			]"
			showCancel
		/> -->
		<!-- <modal v-model:show="visible" content="123" /> -->
	</div>
</template>

<script lang="ts">
import { useActionSheet } from '@/plugins/action-sheet/api'
import router from '@/router'
import { useStore } from '@/store'
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
	setup() {
		const store = useStore()
		const userInfo = computed(() => store.state.user.userInfo)
		const visible = ref(false)
		const search = () => {
			visible.value = true
		}

		const userSetting = () => {
			useActionSheet({
				showCancel: true,
				options: [{ label: '注销', value: 0 }],
				select(val) {
					if (Number(val) === 0) {
						store.dispatch('user/logout')
						router.push('/login')
					}
				}
			})
		}

		return { search, userInfo, visible, userSetting }
	}
})
</script>

<style lang="less" scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	width: 100%;
	height: 120px;
	box-sizing: border-box;
	.header-user {
		display: flex;
		align-items: center;
		.header-user-photo {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		span {
			font-size: 28px;
			font-weight: bold;
			margin-left: 20px;
		}
	}
	.header-search {
		padding: 10px;
		color: blue;
	}
}
</style>
